<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Epilog Theme">
    <title>Bizlamp - Multipurpose eCommerce HTML Template</title>

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/boxicons.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/mailform.css">
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>
    <!-- Header Area Start -->
    <header class="header-area">
        <div class="main-navbar">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="index.html">
                        <img src="assets/images/logo.png" alt="logo">
                    </a>
                    <ul class="cart-menu responsive">
                        <li>
                            <a id="dropdownCartButton" class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span> <i class="bx bx-cart-alt"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                    <p>2 item(s) in your cart - <span>$665.00</span></p>
                                    <div class="minicart-products">
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Artisan Craft Design Product Handicraft</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>

                                        <div class="minicart-product-calculation">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                    <p><strong>Tax:</strong> <span>Free</span></p>
                                                    <p><strong>Total: </strong> <span>$665.00</span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="dcart-action">
                                                        <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                        <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a id="dropdownUserButton" data-toggle="dropdown" href="#"><i class="bx bx-user-circle"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                    <a class="dropdown-item" href="#"><i class="bx bx-user-circle"></i> My Account</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-heart"></i> My Wishlist</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-cart-alt"></i> Checkout</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-log-in"></i> Login Or Register</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <form class="searchbox">
                                <input type="search" placeholder="Search......" name="search" class="searchbox-input" required="">
                                <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                            </form>
                            <a class="search-btn"><i class="bx bx-search-alt"></i></a>
                        </li>
                        <li>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                                <i class='bx bx-menu'></i>
                                <i class='bx bx-x'></i>
                            </button>
                        </li>
                    </ul>

                    <div class="collapse navbar-collapse mean-menu" id="navbarCollapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link active" href="index.html">
                                    Home
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Shop <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="shop.html" class="nav-link">Shop Grid</a></li>
                                    <li class="nav-item"><a href="product-details.html" class="nav-link">Products Details</a></li>
                                    <li class="nav-item"><a href="cart.html" class="nav-link">Cart</a></li>
                                    <li class="nav-item"><a href="checkout.html" class="nav-link">Checkout</a></li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown megamenu">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Collection <i class="bx bx-chevron-down"></i>
                                </a>

                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Pages <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                                    <li class="nav-item"><a href="signin.html" class="nav-link">Login</a></li>
                                    <li class="nav-item"><a href="signup.html" class="nav-link">Register</a></li>
                                    <li class="nav-item"><a href="error-404.html" class="nav-link">404 Error</a></li>

                                    <li class="nav-item"><a href="faqs.html" class="nav-link">FAQ's</a></li>
                                    <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a></li>
                                </ul>

                            </li>


                            <li class="nav-item">
                                <a href="contact.html" class="nav-link">Contact</a>
                            </li>
                        </ul>
                        <ul class="cart-menu">
                            <li>
                                <a class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span><i class='bx bx-cart-alt' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                        <p>2 item(s) in your cart - <span>$665.00</span></p>
                                        <div class="minicart-products">
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Artisan Craft Design Product Handicraft</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>


                                            <div class="minicart-product-calculation">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                        <p><strong>Tax:</strong> <span>Free</span></p>
                                                        <p><strong>Total: </strong> <span>$665.00</span></p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="dcart-action">
                                                            <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                            <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a data-toggle="dropdown" href="#"><i class='bx bx-user-circle' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                        <a class="dropdown-item" href="#"><i class='bx bx-user-circle' ></i> My Account</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-heart' ></i> My Wishlist</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-cart-alt' ></i> Checkout</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-log-in' ></i> Login Or Register</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <form class="searchbox">
                                    <input type="search" placeholder="Search......" name="search" class="searchbox-input" required>
                                    <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                                </form>
                                <a class="search-btn"><i class='bx bx-search-alt' ></i></a>
                            </li>
                        </ul>
                    </div>
                </nav>

            </div>
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Breadcrumbs Area Start -->
    <div class="breadcrumbs text-center">
        <div class="container">
            <h2 class="page-title">Signup</h2>
            <ul class="breadcrumbs-link">
                <li><a href="index.html">Home <i class="bx bx-chevrons-right"></i></a></li>
                <li>Signup</li>
            </ul>
        </div>
    </div>
    <!-- Breadcrumbs Area Start -->

    <!-- Signin Area Start -->
    <div class="bl-account-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="signup-wrapper">
                        <form action="#" method="post" class="layui-form" lay-filter="registerForm">
                            <h4>Signup</h4>
                            <div class="form-group">
                                <label for="firstName">用户名 <span class="required">*</span></label>
                                <input type="text" class="form-control" id="firstName" lay-verify="username" name="username" placeholder="请输入用户名" required>
                                <small class="form-text text-muted">用户名必须是6-16位字母、数字或下划线。</small>
                            </div>

                            <div class="form-group">
                                <label for="password">密码 <span class="required">*</span></label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                                <small class="form-text text-muted">密码必须是6-16位字母、数字或下划线。</small>
                            </div>

                            <div class="form-group">
                                <label for="confirmPassword">确认密码 <span class="required">*</span></label>
                                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                                <small class="form-text text-muted">请确保两次输入的密码一致。</small>
                            </div>
                            <div class="form-check mt-2 mb-2">
                                <input class="form-check-input" type="checkbox" value="" id="createAnAccount">
                                <label class="form-check-label" for="createAnAccount">
                                    I agree to <a href="#">terms & Policy</a>.
                                </label>
                            </div>
                            <button type="button" class="btn btn-primary" lay-submit lay-filter="registerBtn">注册</button>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Signin Area End -->

    <!--  Footer Section Start -->
    <div class="footer">
        <div class="footer-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-6 col-xl-3">
                        <div class="footer-widget footer-social-lcon">
                            <img src="assets/images/logo-white.png" alt="Footer Logo">
                            <br>
                            <p>Donec scelerisque augue libero. Nunc pulvinar porttitor malesuada. Nam non turpis sit amet nisl dignissim rhoncus condimentum et lectus.</p>
                            <ul class="social-icon">
                                <li><a href="#"><i class='bx bxl-facebook-square'></i></a></li>
                                <li><a href="#"><i class='bx bxl-twitter' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-linkedin-square' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-pinterest' ></i></a></li>
                                <li><a href="#"><i class='bx bxl-youtube' ></i></a></li>
                            </ul>

                        </div>
                    </div>



                </div>

            </div>

        </div>

    </div>
    <!--  Footer Section Start -->

    <!--  Top to Bottom  -->
    <div class="top-bottom-scroll"><i class='bx bx-chevrons-up bx-fade-up' ></i></div>

    <!-- JS Script -->
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/aos.js"></script>
    <script src="./assets/js/mailform.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/main.js?v=1.0.0"></script>
    <script src="layui/layui.all.js"></script>

    <script>
        const $=layui.$;
        const form=layui.form;
        const reg=/^\w{6,16}$/;
        const layer=layui.layer;
        form.verify({
            username:function(val,item){
                //验证格式是否正确

                //验证不能重名
                let isOK=true;
                $.ajax({
                   url:'user/getuserbyusername',
                   data:{
                       username:val
                   } ,
                    async:false,
                    success:function(result){
                       console.log(result);
                       if(result.data==null){
                           isOK=true;
                       }
                    }
                });
                if(!isOK){
                    return "用户名重复";
                }
            },
            password:function(val,item){
                //格式是否正确
                if(reg.test(val)){
                    return "密码必须是6-16位字母数字下划线"
                }
            },
            confirm:function(val,item){
                //密码和确认密码是否一样
                let pass=$("[name='password']").val();
                if(val!=pass){
                    return "密码予确认密码必须一样"
                }
            }
        });


        form.on("submit(registerBtn)",function(data){
            //表单验证成功后执行
            let formdata=data.field;//表单中的数据
            let btn=data.elem;//提交按钮
            $(btn).prop("disabled",true);//设置按钮不可用
            $.ajax({
                url:"user/register",
                data:formdata,
                success:function(result){
                    let code=result.code;
                    let msg=result.msg;
                    console.log(result);
                    if(code!=200){
                        layer.msg(msg,{icon:2})
                        location.href="shopping/signin";
                    }else{
                        layer.msg(msg,{icon:1,time:3000})
                        setTimeout(function(){
                            location.href="shopping/signin";
                        },3000)
                    }
                }
            })

            //却笑表单自行提交
            return false;
        })
    </script>

</body>
</html>